<!--聊天窗口-->
<script setup lang="ts">
import ChatBubble from "@/app/connect/views/rightContent/modules/chat/chatBubble.vue";
</script>
<template>
  <div class="chat">
    <div class="chat-head">
      <div></div>
      <div class="title">Soraki</div>
      <div class="right-tools">
        <div class="material-icons">more_vert</div>
      </div>
    </div>
    <div class="chat-container">
      <ChatBubble :me="true"></ChatBubble>
      <ChatBubble :me="false"></ChatBubble>
      <ChatBubble :me="false"></ChatBubble>
      <ChatBubble :me="true"></ChatBubble>
      <ChatBubble :me="false"></ChatBubble>
      <ChatBubble :me="true"></ChatBubble>
<!--      <ChatBubble :me="false"></ChatBubble>-->
    </div>
  </div>
</template>
<style lang="less" scoped>
.chat {
  height: 100%;

  .chat-head {
    height: 35px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #F0F1F3;
    padding: 0 10px;

    .right-tools {
      user-select: none;
      display: flex;
      cursor: pointer;
      align-items: center;
    }

    .title {
      font-size: 14px;
      font-weight: 500;
    }
  }

  .chat-container {
    height: calc(100% - 35px);
    overflow: auto;
    //padding-bottom: 100px;
  }

  //.chat-container::-webkit-scrollbar {
  //  display: none;
  //}
}
</style>
